<template>
  <div>
    <div>
      <!--body图片轮播-->
      <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
      <p>current index: {{demo06_index}}</p>
    </div>
    <div>
      <!--9宫格-->
      <grid :show-lr-borders="false" :show-vertical-dividers="false">
        <grid-item link="/component/cell" label="新闻资讯">
          <img slot="icon" src="/static/image/新闻资讯.png">
        </grid-item>
        <grid-item :link="{ path: '/component/cell'}" label="图文分享">
          <img slot="icon" src="/static/image/图文分享.png">
        </grid-item>
        <grid-item link="/component/cell" @on-item-click="onItemClick">
          <img slot="icon" src="/static/image/商品展示.png">
          <span slot="label">{{ demo06_list }}</span>
        </grid-item>
        <grid-item link="/component/cell" label="留言反馈">
          <img slot="icon" src="/static/image/留言反馈.png">
        </grid-item>
        <grid-item :link="{ path: '/component/cell'}" label="搜索资讯">
          <img slot="icon" src="/static/image/搜索资讯.png">
        </grid-item>
        <grid-item link="/component/cell" @on-item-click="onItemClick">
          <img slot="icon" src="/static/image/联系我们.png">
          <span slot="label">{{ demo06_index }}</span>
        </grid-item>
      </grid>
    </div>
  </div>
</template>
<script>
  import {Swiper, Grid, GridItem} from 'vux';
  import http from '@/utils/request.js';
  /* [{
      url: 'http://m.baidu.com',
      img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
      title: '送你一朵fua'
    }, {
      url: 'http://www.youku.com',
      img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
      title: '送你一辆车'
    }, {
      url: 'http://www.163.com',
      img: 'https://static.vux.li/demo/5.jpg', // 404
      title: '送你一次旅行',
      fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
    }] */
  export default {
    name: 'vu1',
    data() {
      return {
        demo06_list: [],
        demo06_index: 1
      };
    },
    components: {
      Swiper,
      Grid,
      GridItem
    },
    methods: {
      demo06_onIndexChange(index) {
        this.demo06_index = index + 1;
      },
      onItemClick(){
        console.log(111);
      }
    },
    created() {
      http.get('/api').then(res => {
        this.demo06_list = res.data.map((item, index) => ({
          url: item.url,
          img: item.img,
          fallbackImg: item.fallbackImg,
          title: `(可点击)${item.title}`
        }));
      }).catch(err => {
        console.log(err);
      });
    }
  };
</script>

<style scoped>
  .weui-grid {
    width: 25%!important;
  }
</style>
